<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>左右分栏布局示例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body, html {
            height: 100%;
            overflow: hidden;
        }
        .container {
            display: flex;
            height: 100vh;
        }
        .sidebar {
            width: 250px;
            background-color: #f0f0f0;
            padding: 20px;
            overflow-y: auto;
            overflow-y: auto; /* 高度不足时自动显示滚动条 */
            height: 1000px; /* 手动设置固定高度 */

        }
        .sidebar ul {
            list-style-type: none;
        }
        .sidebar li {
            margin-bottom: 10px;
        }
        .sidebar a {
            display: block;
            padding: 8px 12px;
            background-color: #e0e0e0;
            text-decoration: none;
            color: #333;
            border-radius: 4px;
        }
        .sidebar a:hover {
            background-color: #d0d0d0;
        }
        .main-content {
            flex: 1;
            border: none;
        }

        /* 修改后的iframe容器样式 */
        .iframe-container {
            flex: 1; /* 占满剩余空间 */
            height: 100%;
            overflow: hidden; /* 防止内容溢出 */
        }

        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
</head>
<body>

<!--  主界面  -->
<div id="mainContainer" class="container">
    <div class="sidebar">
        <h3>LCC样例</h3>
        <h4 id="title">LCC样例</h4>
        <ul id="item-list">
            <!--            <li><a href="#" data-url="https://www.baidu.com" data-param="from=sidebar&source=baidu">百度</a></li>-->
        </ul>
    </div>

    <!--iframe中加载相关的页面    -->
    <div class="iframe-container">
        <iframe id="contentIFrame"
            class="main-content"
            name="contentFrame"
            src="threeDGSLCCForCesiumRightDefaultPage.html"
            sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
    </div>
</div>



<script type="module">
    import {ThreeDGSLCCConfigForCesiumHandler,ThreeDGSLCCConfigForCesiumParser} from './ThreeDGSLCCConfigForCesiumParser.js';
    class Finder{
        constructor() {
            // 可选：初始化时检查 DOM 是否可用
            if (typeof document === 'undefined') {
                throw new Error('DOM环境不可用');
            }
        }

        $(id) {
            return document.getElementById(id);
        }

        findItemList(){
            return this.$('item-list');
        }

        findContentIFrame(){
            return this.$('contentIFrame');
        }

        findTitle(){
            return this.$('title');
        }
    }

    class UIController{
        createItem(menuItem,basePath,dataUrl){
            // 创建 li 元素
            const liElement = document.createElement('li');

            // 创建 a 元素
            const aElement = document.createElement('a');

            // 设置 a 元素的属性
            aElement.href = '#';
            // 这边是固定的地址
            // aElement.dataset.url = 'https://www.baidu.com';
            // aElement.dataset.param = 'requestUrl=' + basePath + menuItem.url;
            aElement.setAttribute("data-url",dataUrl);
            const requestParams = encodeURIComponent(basePath + menuItem.path);
            aElement.setAttribute("data-param-1","requestUrl=" + requestParams);

            aElement.innerHTML = menuItem.label;
            // 将 a 元素添加到 li 元素中
            liElement.appendChild(aElement);

            liElement.addEventListener('click', (e)=> {
                e.preventDefault();
                // 获取自定义数据属性
                const targetUrl = aElement.getAttribute('data-url');
                let params = aElement.getAttribute('data-param-1');
                // console.log("before:" + params);
                params = decodeURIComponent(params);
                // console.log("after:" + params);
                // 构建带参数的完整URL
                const fullUrl = targetUrl + (targetUrl.includes('?') ? '&' : '?') + params;
                console.log(fullUrl);
                // this.$('contentIFrame').setAttribute("src", fullUrl);

                // 统一这个类进行ID界面资源查找

                const contentIFrame = new Finder().findContentIFrame();
                contentIFrame.setAttribute("src", fullUrl);
                contentIFrame.addEventListener("load", function () {
                    // 这段代码必须要加，不然获contentIFrame页面不能处理键盘事件(所以这边默认获得焦点)
                    console.log("contentIFrame loaded");
                    contentIFrame.contentWindow.focus();
                });
                const ss = contentIFrame.getAttribute("src");
                console.log("ss:" + ss);
            })

            return liElement;
        }


        // 初始化的时候用到
        bindToPage(menuItem,basePath,dataUrl){
            const requestParams = basePath + menuItem.path;
            const dataParams = "requestUrl=" + requestParams;
            // console.log("after:" + params);
            // 构建带参数的完整URL
            const fullUrl = dataUrl + (dataUrl.includes('?') ? '&' : '?') + dataParams;
            console.log("bindToPage() fullUrl:" + fullUrl);

            // this.$('contentIFrame').setAttribute("src", fullUrl);
            // 统一这个类进行ID界面资源查找
            new Finder().findContentIFrame().setAttribute("src", fullUrl);
        }
    }



    function printItem(item){
        for (const key in item) {
            console.log(key, item[key]); // 输出: name Alice, age 30, gender female
        }
    }

    function loadPage(listener){
        listener.preload();
        const finder = new Finder();

        const itemList = finder.findItemList();
        const uiController = new UIController();


        ThreeDGSLCCConfigForCesiumHandler.fetchThreeDGSLCC().then((configData) => {
            const parser = new ThreeDGSLCCConfigForCesiumParser(configData);
            const baseUrl = parser.baseUrl;
            const menuItems = parser.getLoadedMenuItems();
            const defaultPage = parser.getRightPage();
            // 打印日志方面
            console.log("baseUrl:" + baseUrl);
            console.log("defaultPage:" + defaultPage);
            menuItems.forEach(menuItem => {
                // printItem(menuItem);
                const item = uiController.createItem(menuItem,baseUrl,defaultPage);
                itemList.appendChild(item);
            });

            // 加载第一个菜单元素中到默认界面
            // uiController.bindToPage(menuItems[0],baseUrl,defaultPage);
        }).catch(error=>{}).finally(()=>{});

    }

    function createListener(){
        return {
            preload: function () {
                // document.getElementById('loadingContainer').style.display = 'block';
                // document.getElementById('mainContainer').style.display = 'none';
            },
            loaded: function () {
                // document.getElementById('loadingContainer').style.display = 'none';
                // document.getElementById('mainContainer').style.display = 'block';
            }
        }
    }

    function executeLoadPage(){
        loadPage(createListener());
    }

    executeLoadPage();

</script>
</body>
</html>